import React, {useEffect, useState} from 'react';
import { Col } from 'antd';
import '../index.less'
import Pies from './pie'

export default function spreadBar(props) {
  const [totalData, setTotalData] = useState({});
  const [passData, setPassData] = useState({});
  const [reviewData, setReviewData] = useState({});
  const [rejectData, setRejectData] = useState({});
  useEffect(() => {
    resetData();
  }, [props.data])
  // 重置数据
  function resetData() {
    const list = props.data
    const totalData = list.find(item => item.key === 'total') || {}; // 总请求量
    const passData = list.find(item => item.key === 'pass') || {}; // 通过请求量
    const reviewData = list.find(item => item.key === 'review') || {}; // 复核请求量
    const rejectData = list.find(item => item.key === 'reject') || {}; // 拒绝请求量
    setTotalData(totalData);
    setPassData(passData);
    setReviewData(reviewData);
    setRejectData(rejectData);
  }
   // 新增跳转链接到请求事件监控方法goTo
  function goTo(risk_level) {
    const baseUrl = `/monitor/event?app_id=${props.requestParam.app_id}&product_id=${props.requestParam.product_id}&event_id=${
      props.requestParam.event_id
    }&start_time=${encodeURIComponent(props.requestParam.start)}&end_time=${encodeURIComponent(props.requestParam.end)}`;
    const url = (risk_level && risk_level !== 'total') ? `${baseUrl}&risk_level=${risk_level}` : baseUrl;
    props.history.push(url);
  };
  const lists = [
    {
      name: '总请求量',
      value: totalData.value || 0,
      color: '#fafafa',
      key: totalData.key
    },
    {
      name: '通过请求量',
      value: passData.value || 0,
      color: '#1890ff',
      key: passData.key
    },
    {
      name: '复核请求量',
      value: reviewData.value || 0,
      color: '#ffa940',
      key: reviewData.key
    },
    {
      name: '拒绝请求量',
      value: rejectData.value || 0,
      color: '#ff4d4f',
      key: rejectData.key
    }
  ]
  const labeOptions = {
    show: true, // 是否显示文字
    position: 'center', // 定位
    fontSize: '14',
    formatter: (params) => {
      if (params.dataIndex) {
        return (totalData.value && (((params.value / totalData.value)* 10000).toFixed() / 100 + '%')) || 0
       }
       return ''
    }  
  }
  const getData = (data) => {
    const overList = [{
        name: '其余请求量',
        value: totalData.value - data.value,
        color: '#f5f5f5'
      }, data]
      return overList
  }
  return (
    <>
      <p className='title-dash'>请求情况</p>
      {
       lists.map((item,index) => {
        return (
          <Col key={index.toString()} span={24 / lists.length}>
            <div className='request-situation-boxs'>
               <div className='request-title-boxs'>
                  <p>{item.name}</p>
                  <p><span>{item.value}</span>{!props.hideDetail ? (<span onClick={() => goTo(item.key)}>详情</span>) : ('')}</p>
               </div>
               {index > 0 && (
                 <div>
                   <Pies 
                     labelOption={labeOptions}
                     data={getData(item)}
                     radius={["50%", "75%"]}
                     colorOptions={[item.color, '#fafafa']}
                     center={["35%", "50%"]}
                     ></Pies>
                 </div>
                 )
               }
            </div>
          </Col>
        )
       })
      }
    </>
  )
}